<template>
  <n-card title="推送记录" :bordered="false">
    <n-space vertical>
      <n-form inline :label-width="80">
        <n-form-item label="数据ID">
          <n-input v-model:value="filterForm.dataId" placeholder="请输入数据ID" />
        </n-form-item>
        <n-form-item label="任务ID">
          <n-input v-model:value="filterForm.taskId" placeholder="请输入任务ID" />
        </n-form-item>
        <n-form-item label="摄像头ID">
          <n-input v-model:value="filterForm.cameraId" placeholder="请输入摄像头ID" />
        </n-form-item>
        <n-form-item label="流地址">
          <n-input v-model:value="filterForm.streamUrl" placeholder="请输入流地址" />
        </n-form-item>
        <n-form-item label="异常类型">
          <n-select
            v-model:value="filterForm.exceptionType"
            :options="exceptionTypeOptions"
            placeholder="请选择异常类型"
          />
        </n-form-item>
        <n-form-item label="时间范围">
          <n-date-picker
            v-model:value="filterForm.timeRange"
            type="datetimerange"
            clearable
          />
        </n-form-item>
        <n-button type="primary" @click="handleSearch">查询</n-button>
        <n-button @click="handleReset">重置</n-button>
      </n-form>

      <n-data-table
        :columns="columns"
        :data="pushList"
        :pagination="pagination"
        :loading="loading"
        :scroll-x="1200"
      />
    </n-space>
  </n-card>
</template>

<script lang="ts" setup>
import { h, ref, reactive, onMounted } from 'vue';
import { NDataTable, NButton, NTag, NSpace, useMessage, NForm, NFormItem, NInput, NSelect, NDatePicker } from 'naive-ui';

const message = useMessage();
const loading = ref(false);

// 设置页面标题
const setPageTitle = () => {
  document.title = '推送记录 - 数据中心';
};

onMounted(() => {
  setPageTitle();
});

// 筛选表单
const filterForm = reactive({
  dataId: '',
  taskId: '',
  cameraId: '',
  streamUrl: '',
  exceptionType: null,
  timeRange: null
});

// 异常类型选项
const exceptionTypeOptions = [
  { label: '异常类型1', value: 'type1' },
  { label: '异常类型2', value: 'type2' },
  { label: '异常类型3', value: 'type3' }
];

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  showQuickJumper: true
});

// 推送记录数据
const pushList = ref([
  {
    id: 1,
    pushTime: '2023-10-01 10:00:00',
    screenshot: 'https://example.com/screenshot1.jpg',
    videoClip: 'https://example.com/video1.mp4',
    exceptionType: '异常类型1',
    pushStatus: '成功',
    dataId: '12345',
    pushAddress: 'rtmp://example.com/live/stream'
  }
  // 更多示例数据...
]);

// 表格列配置
const columns = ref([
  { title: '推送时间', key: 'pushTime', width: 150 },
  {
    title: '报警截图',
    key: 'screenshot',
    render(row) {
      return h(NButton, {
        text: true,
        type: 'primary',
        onClick: () => {
          if (row.screenshot) {
            window.open(row.screenshot, '_blank');
          } else {
            message.warning('暂无截图');
          }
        }
      }, '查看截图');
    }
  },
  {
    title: '录制片段',
    key: 'videoClip',
    render(row) {
      return h(NButton, {
        text: true,
        type: 'primary',
        onClick: () => {
          if (row.videoClip) {
            window.open(row.videoClip, '_blank');
          }
        }
      }, '查看视频');
    }
  },
  { title: '异常类型', key: 'exceptionType' },
  {
    title: '推送状态',
    key: 'pushStatus',
    render(row) {
      return h(NTag, {
        type: row.pushStatus === '成功' ? 'success' : 'error'
      }, row.pushStatus);
    }
  },
  { title: '数据ID', key: 'dataId' },
  { title: '推送地址', key: 'pushAddress' }
]);

// 查询处理
function handleSearch() {
  loading.value = true;
  // 模拟异步请求
  setTimeout(() => {
    loading.value = false;
    message.success('查询成功');
  }, 500);
}

// 重置表单
function handleReset() {
  Object.assign(filterForm, {
    dataId: '',
    taskId: '',
    cameraId: '',
    streamUrl: '',
    exceptionType: null,
    timeRange: null
  });
}
</script>
